<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手机号绑定</title>
    <link rel="stylesheet" href="./authorization/style.css" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="./utils/common.js"></script>
    <style>
        input:disabled{
            /*border : 1px solid #DDD ;*/
            /*background-color : #F5F5F5 ;*/
            color : #3b3b3b;
        }

        .loading-container {
            height: 5vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="boxs">
    <div class="forms form__login">
        <h2>手机号绑定</h2>
        <form class="form1" id="loginForm" style="gap:0;min-width: 260px">
            <div class="log__email log__box" id="formInput" style="height: 0">
                <input
                        type="text"
                        class="login__email input-style"
                        placeholder="请先跳转小程序进行绑定"
                        maxlength="11"
                        id="phoneNumber"
                        required disabled = "disabled"
                        style="display: none"
                />
                <!-- <ion-icon class="i" name="mail-outline"></ion-icon> -->
                <ion-icon class="i" name="mail-phone"></ion-icon>
                <small class="form__login-email--error" id="loginEmailErr"
                >error message</small
                >
            </div>


            <button class="login-btn" type="submit" id="loginSubmit" style="display:none;">
                绑定
            </button>
            <div class="loading-container">
                <div class="loading-spinner"></div>
            </div>
            <wx-open-launch-weapp id="launch-btn" appid="wx0b8dac82e868ea1c" username="gh_bad15cb66367" path="pages/user/getPhone">
                <template>
                    <style>
                        .text{
                            color: red;
                            width: 260px;
                            margin-bottom: 40px;
                            line-height: 1.5;
                        }
                        .btn {
                        width: 260px;
                        height: 3rem;
                        border-radius: 10px;
                        background-color: #3488dc;
                        color: white;
                        border: none;
                        font-weight: 700;
                        cursor: pointer;
                        /*color: #3488dc;*/
                        /*border: 1px solid #3488dc;*/
                        /*background: white;*/
                        /*border-radius: 0;*/

                        /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);*/
                    }</style>
                    <div class="text">
                        系统提示：您还未绑定手机号码请点击下一步完成手机绑定!
                    </div>
                    <button class="btn" id="jumpBtn">下一步</button>
                </template>
            </wx-open-launch-weapp>

            <div id="unbind" style="color: red;position: relative;font-size:12px;display:none">我不需要再接收推送消息！</div>


        </form>
    </div>
</div>
<script src="./authorization/authorization.js"></script>
<script>
    getWxCode();

    document.addEventListener('visibilitychange', visibilityChange);
    function visibilityChange() {
        if (document.hidden) {
            // 页面被隐藏时执行的操作
            console.log('页面被隐藏时执行的操作');

        } else {
            // 页面被显示时执行的操作
            console.log('页面被显示时执行的操作');
            history.replaceState(null, '', location.href);
            history.replaceState({}, document.title, location.href.split('?')[0]);
            getWxCode();

        }
    }
    // getOpenId('021FvxFa1QyW2F0Wo6Ha1cFnfE1FvxFM');
</script>
</body>
</html>

